<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="EasySvg-min.js"></script>
        <script type="text/javascript">
            
            var svg = null;
            
            window.addEventListener("load", function() {
                svg = EasySvg.svg({
                    attr: { 
                        width:'10cm',
                        height:'10cm',
                        style: "border:0;width: 100%; height: 100%; margin-bottom: -8px; background: #fec"
                    }
                });
                hallotext = svg.text("Hallo",{
                        x: 50,
                        y: 50,
                        'font-size':72,
                        fill: 'url(#gradient2)',
                        focus: false,
                        focusable:"true",
                        editable: true
                }).on("click", function() {
                    hallotext.attr({focus: true, stroke: "#000", "stroke-width": 2 })
                });
                var hallotextAnim = new SvgElement('animate', hallotext.dom, svg);
                hallotextAnim.attr({ 
                    attributeName:"x", 
                    attributeType:"XML",
                    begin:"0s", 
                    dur:"9s", 
                    fill:"freeze", 
                    from:"50", 
                    to:"200"}); 
                // declare definitions
                var def = svg.defines();
                    
                    def.radialGradient({
                        id: "gradient1",
                        cx: "35%",
                        cy: "35%",
                        r: "75%"
                    }).stop("0%","#fff").stop("100%","#000");
                    
                    def.linearGradient({
                        id: "gradient2",
                        x1: "0%",
                        y1: "0%",
                        x2: "0%",
                        y2: "100%"                        
                    }).stop("0%","#fd0").stop("100%","#000");
                    
                    def.symbol({
                        id: "bullet1"
                    })
                    .group({})
                    .add(svg.circle({
                            cx: 30,
                            cy: 30,
                            r: 10,
                            fill: 'url(#gradient1)'}))
                    .add(hallotext)
                    .on("click", function() {
                        //alert(1);
                    });
                       
                // Add our containers and elements as a single javascript config object
                svg.add({
                    type: 'g',
                    items:[
                        {
                            type: 'circle',
                            attr: {
                                cx: 50,
                                cy: 50,
                                r: 50,
                                fill: 'url(#gradient1)'
                            },
                            animate: {
                                attr: { 
                                    attributeName:"cx", 
                                    attributeType:"XML",
                                    begin:"0s", 
                                    dur:"9s", 
                                    fill:"freeze", 
                                    from:"150", 
                                    to:"400"
                                }
                            }
                        }, {
                            type: 'rect',
                            attr: {
                                x: 150,
                                y: 150,
                                width: 50,
                                height: 50,
                                fill: 'url(#gradient2)'
                            },
                            listeners: {
                                click: function(e) {
                                    this.attr({
                                        stroke: "red",
                                        "stroke-width": 2
                                    });
                                }
                            }
                        }
                    ]
                });
                        
            });
            
            
        </script>
    </head>
    <body style="padding: 0px;margin: 0px; width: 100%; height: 100%; overflow: hidden">
        
    </body>
</html>
